<template>
  <div class="container">
    <a-card class="login-card">
      <h1>Antd-Admin</h1>
      <a-form :model="form" :label-col="labelCol">
        <a-form-item label="邮箱">
          <a-input v-model:value="form.email" />
        </a-form-item>
        <a-form-item label="密码">
          <a-input type="password" v-model:value="form.password" />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 9 }">
          <a-button type="primary" @click="login">登录</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
import {reactive, ref, toRaw} from "vue";
import {message, notification} from "ant-design-vue";
import {useRouter, useRoute} from "vue-router";
import {apiGet, apiPost} from "../../fentch";

const route = useRoute()
const refer = route.query.refer || '/'

const router = useRouter()
const form = ref({
  email: '',
  password: ''
})
const labelCol = {
  style: {
    width: '50px'
  }
}

const login = async () => {
  apiPost('/auth/login', form.value).then(res => {
    if (res.data.code === 0) {
      window.localStorage.setItem('token', res.data.data.access_token)
      let now = new Date();
      now.setSeconds(now.getSeconds() + res.data.data.expires_in)
      window.localStorage.setItem('expireTime', now.getTime().toString())
      apiGet('/auth/me').then(res => {
        if (res.data.code === 0) {
          window.localStorage.setItem('user', JSON.stringify(res.data.data))
          router.push(refer)
          return
        }
        message.error(res.data.message)
      })
      return
    }
    message.error(res.data.message)
  })
}

</script>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-card {
  padding: 20px 0;
  width: 600px;
}
</style>